﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CmnTab.ascx.cs" Inherits="MvcApplication5.Views.Control.CmnTab" %>
<script src="../../Scripts/Control/CmnTab.js" type="text/javascript"></script>
<link href="../../Content/Control/CmnTab.css" rel="stylesheet" type="text/css" />
<div id="tab_show">
    <div class="tab_content">
        <a id="qianSpan"><<</a>&nbsp;<a id="houSpan">>></a>
        <div id="cmnTab_div" class="tab" runat="server">
            <ul>
                <li id="cmntab_li_0" runat="server"><a class="selected" menu_id="0"><span class="selected">
                    空白页 </span></a></li>
            </ul>
        </div>
    </div>
    <div id="cmnTab_main" class="tabbody" runat="server">
        <div class="sub_cmnTab_main" id="sub_cmnTab_main_0" menu_id="0" runat="server">
        </div>
    </div>
</div>
<script type="text/javascript">
    function CmnTab_Page_Load() {
        <%= GetJSInstance()%> = new CmnTab();
        var cmnTabIns = <%= GetJSInstance()%>;

        cmnTabIns.dom.cmnTab_div = "<%= cmnTab_div.ClientID%>";
        cmnTabIns.dom.cmntab_li_0 = "<%= cmntab_li_0.ClientID%>";
        cmnTabIns.dom.cmnTab_main = "<%= cmnTab_main.ClientID%>";
        cmnTabIns.dom.sub_cmnTab_main_0 = "<%= sub_cmnTab_main_0.ClientID%>";

        cmnTabIns.dom.clientID = "<%= this.ClientID %>";

        cmnTabIns.init();
    }

    CmnTab_Page_Load();
</script>
<script type="text/javascript">
    $j(function () {
        var countClick = 0;
        var j = 13; //每版放4个图片
        //向后 按钮
        $j("#houSpan").click(function () {   //绑定click事件
            var liwidth = 0;
            var parent = $j(this).parents("div #tab_show"); //根据当前点击元素获取到父元素
            var tab_show = parent.find("div.tab"); //寻找到“内容展示区域”
            var tab_content = parent.find("div.tab_content"); //寻找到“内容展示区域”外围的DIV元素
            var tab_width = 1118;
            var len = tab_show.find("li").length;
            if (len > 1) {
                var newlen = len - 1;
            }
            else {
                var newlen = 1;
            }
            liwidth = (len * 90) + (len - 1);
            tab_show.width(liwidth);
            var page_count = Math.ceil(newlen / j);   //只要不是整数，就往大的方向取最小的整数
            if (!tab_show.is(":animated")) {    //判断“视频内容展示区域”是否正在处于动画
                if (page == page_count) {  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
                    tab_show.animate({ left: '0px' }, "slow"); //通过改变left值，跳转到第一个版面
                    page = 1;
                } else {
                    tab_show.animate({ left: '-=' + tab_width }, "slow");  //通过改变left值，达到每次换一个版面
                    page++;
                }
            }
        });
        //往前 按钮
        $j("#qianSpan").click(function () {
            var liwidth = 0;
            var parent = $j(this).parents("div #tab_show"); //根据当前点击元素获取到父元素
            var tab_show = parent.find("div.tab"); //寻找到“内容展示区域”
            var tab_content = parent.find("div.tab_content"); //寻找到“内容展示区域”外围的DIV元素
            var tab_width = 1118;
            var len = tab_show.find("li").length;
            if (len > 1) {
                var newlen = len - 1;
            }
            else {
                var newlen = 1;
            }
            liwidth = (len * 90) + (len - 1);
            tab_show.width(liwidth);
            var page_count = Math.ceil(newlen / j);   //只要不是整数，就往大的方向取最小的整数
            if (!tab_show.is(":animated")) {    //判断“视频内容展示区域”是否正在处于动画
                if (page == 1) {  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
                    tab_show.animate({ left: '-=' + tab_width * (page_count - 1) }, "slow");
                    page = page_count;
                } else {
                    tab_show.animate({ left: '+=' + tab_width }, "slow");
                    page--;
                }
            }
        });
    });
</script>
